
import $Element from "@/core/Element";
import EventManage from "@/core/EventWithDelegateMgr";
export default class Scale extends $Element {
    private container: $Element;
    private buttonText: $Element;
    private menuDialog: $Element;
    private menuDialogViewSizeDoms: $Element[] = [];
    private changePlaygroundFunction!: (width: number, height: number) => void;
    // private eventMgr:EventManage;
    private scaleStrategys: { [key: string]: string[] } = {
        "4:3": ["1152×864", "1280×1024", "1280×960", "1600×1200"],
        "16:9": ["1366×768", "1280×720", "1600×900", "", "1920×1080", "2560×1440", "3840×2160"],
        "16:10": ["1280×800", "1366×768", "1440×900", "1680×1050", "1920×1200", "2560×1600"],
        "5:4": ["1280×1024"]
    };
    constructor(container: $Element) {
        super("<div/>");
        this.container = container;

        this.buttonText = new $Element("<span/>");
        (<HTMLElement>this.buttonText.current).innerHTML = "切换比例(16:9)";
        this.appendChild(this.buttonText)
        // (<HTMLElement>this.dialogCloseButton.current).style.display="none";
        this.menuDialog = new $Element("<div/>");
        this.menuDialog.addClassName("scale-tool-menu");
        (<HTMLElement>this.menuDialog.current).style.display = "none";
        this.container.appendChild(this.menuDialog);
        this.container.appendChild(this);
        // (<HTMLElement>this.current).innerText = "切换比例(16:9)";
        this.initScaleElement();
        const self = this;
        for (let key in this.scaleStrategys) {
            const newViewSizeElement = new $Element("<div/>");
            newViewSizeElement.addClassName("scale-tool-menu-item");
            this.menuDialogViewSizeDoms.push(newViewSizeElement);
            const titleElement = new $Element("<div/>");
            (<HTMLElement>titleElement.current).innerHTML = key;
            titleElement.addClassName("title")
            newViewSizeElement.appendChild(titleElement);
            this.scaleStrategys[key].forEach(viewSize => {
                const subTitleElement = new $Element("<div/>");
                (<HTMLElement>subTitleElement.current).innerHTML = viewSize;
                subTitleElement.addClassName("sub-menu");
                subTitleElement.addEventListener("click", function (this: HTMLElement) {
                    (<HTMLElement>self.buttonText.current).innerHTML = "切换比例(" + key + ")";
                    self.changePlaygroundFunction && self.changePlaygroundFunction(parseInt(this.innerHTML.split("×")[0]), parseInt(this.innerHTML.split("×")[1]));
                    (<HTMLElement>self.menuDialog.current).style.display = "none";
                });
                newViewSizeElement.appendChild(subTitleElement);
            });
            this.menuDialog.appendChild(newViewSizeElement);
        }
    }
    changePlaygroundSize(fn: (width: number, height: number) => void) {
        this.changePlaygroundFunction = fn;
    }
    private initScaleElement() {
        const self = this;
        this.addEventListener("click", function (evt: Event) {
            (<HTMLElement>self.menuDialog.current).style.display = "flex";
        });
    }
}